<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米首页</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <script src="/js/jquery.1.11.1.min.js"></script>

</head>
<body>

<!-- 顶部菜单模块 从外部引入通用页面-->
<th:block th:include="header"/>

<!-- 首页商品列表 -->
<div class="scroll">
    <!-- 推荐商品轮播图 -->
    <ul>
        <li><a href="plus5.html"><img src="/img/scroll_01.jpg" alt=""></a></li>
        <li><a href="plus5.html"><img src="/img/scroll_02.jpg" alt=""></a></li>
        <li><a href="plus5.html"><img src="/img/scroll_03.jpg" alt=""></a></li>
        <li><a href="plus5.html"><img src="/img/scroll_04.jpg" alt=""></a></li>
        <li><a href="plus5.html"><img src="/img/scroll_05.jpg" alt=""></a></li>
        <li><a href="plus5.html"><img src="/img/scroll_06.jpg" alt=""></a></li>
    </ul>
    <div class="scroll_dot">
        <span class="scroll_dot_span"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="scroll_arrows">
        <a href="javascript:void(0);"><span class="left scroll_arrows_back">〈</span></a>
        <a href="javascript:void(0);"><span class="right scroll_arrows_back">〉</span></a>
    </div>
    <!-- 推荐商品二级菜单 -->
    <div class="scroll_left">
        <ul id="UL1" class="l-list fs12 scr-ul">
<!--                        <li class="scr_li"><a href="">手机 电话卡</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">笔记本</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">电视 盒子</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">路由器 智能硬件</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">移动电源 电池 插线板</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">耳机 音响</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">保护套 贴膜</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">线材 支架 存储卡</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">箱包 服饰 鞋 眼镜</a><i class="scr_i"></i></li>-->
<!--                        <li class="scr_li"><a href="">米兔 生活周边</a><i class="scr_i"></i></li>-->
        </ul>
    </div>
<!--    <div class="scroll_right"><img src="/img/scroll_02.jpg"></div>-->
</div>
<!-- 菜单底层栏 -->
<div class="bot">
    <div class="bot_max">
        <div class="bot_first">
            <div class="bot_one">
                <div><a href=""><img src="/img/bot_01.jpg">选购手机</a></div>
                <div><a href=""><img src="/img/bot_02.jpg">企业团购</a></div>
                <div><a href=""><img src="/img/bot_03.jpg">F码通道</a></div>
                <div><a href=""><img src="/img/bot_04.jpg">img米粉卡</a></div>
                <div><a href=""><img src="/img/bot_05.jpg">以旧换新</a></div>
                <div><a href=""><img src="/img/bot_06.jpg">话费充值</a></div>
            </div>
        </div>
        <a href="#"><img src="/img/3_02.jpg" alt=""></a>
        <a href="#"><img src="/img/3_03.jpg" alt=""></a>
        <a href="#"><img src="/img/3_04.jpg" alt=""></a>
    </div>
</div>

<!-- 首页展示推荐商品 -->
<div class="time">
    <div class="H">小米明星单品</div>
    <div class="time_in">
        <ul>

            <a th:each="p: ${products}" th:href="'/product/' +${p.id}">
                <li class="item">
                    <img th:src="${p.imgPath}" class="pic" alt="">
                    <h3 class="item-name" th:text="${p.name}"></h3>
                    <p class="item-info" th:text="${p.title}"></p>
                    <p class="item-price">
                        <span class="present-price">[[${p.price}]]元起</span>
                    </p>
                </li>
            </a>

        </ul>
    </div>
</div>

<!-- 家电 -->
<div class="appliances">
    <div class="app_width">
        <div class="app_A">家电</div>
        <div class="app_Ar orangeGL">
            <div class="app_Ar_r"><a href="">热门</a></div>
            <div class="app_Ar_r"><a href="">电视影音</a></div>
            <div class="app_Ar_r"><a href="">电脑</a></div>
            <div class="app_Ar_r"><a href="">家居</a></div>
        </div>
        <div class="app_max">
            <div class="appl"><a href=""><img src="/img/app_00.jpg" alt=""></a></div>
            <div class="appr">
                <div class="appr_top">
                    <div class="appr_min" id="appr_min1"><a href=""><img src="/img/app_04.jpg" alt=""></a></div>
                    <div class="appr_min"><a href=""><img src="/img/app_03.jpg" alt=""></a></div>
                    <div class="appr_min"><a href=""><img src="/img/app_02.jpg" alt=""></a></div>
                    <div class="appr_min"><a href=""><img src="/img/app_01.jpg" alt=""></a></div>
                </div>
                <div class="appr_bottom">
                    <div class="appr_min" id="appr_min2">
                        <div class="appr_min_top"><a href=""><img src="/img/app_24.jpg" alt=""></a></div>
                        <div class="appr_min_bottom">
                            <a href="">
                            <div class="figure_a">
                                <h3>浏览更多</h3>
                                <li style="color:#757575; ">热门</li>
                            </div>
                            <div class="figure_b">
                                <div class="figure_b_yuan">
                                    <li>→</li>
                                </div>
                            </div>
                            </a>
                        </div>
                    </div>
                    <div class="appr_min"><a href=""><img src="/img/app_23.jpg" alt=""></a></div>
                    <div class="appr_min"><a href=""><img src="/img/app_22.jpg" alt=""></a></div>
                    <div class="appr_min"><a href=""><img src="/img/app_21.jpg" alt=""></a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 智能 -->
<div class="capabackground">
    <div class="capacity">
        <div class="capa_box_top">
            <div class="capa_box_top_al">智能</div>
            <div class="capa_box_top_ar">
                <div class="capa_box_top_ar_min orangeGL">
                    <a class="script_capa_box_top_ar" href="javascript:;">路由器</a>
                </div>
                <div class="capa_box_top_ar_min orangeGL">
                    <a class="script_capa_box_top_ar" href="javascript:;">酷玩</a>
                </div>
                <div class="capa_box_top_ar_min orangeGL">
                    <a class="script_capa_box_top_ar" href="javascript:;">健康</a>
                </div>
                <div class="capa_box_top_ar_min orangeGL">
                    <a class="script_capa_box_top_ar" href="javascript:;">出行</a>
                </div>
                <div class="capa_box_top_ar_min orangeGL">
                    <a class="script_capa_box_top_ar" href="javascript:;">热门</a>
                </div>
            </div>
        </div>
        <div class="capa_box scrip_capa_box scrip_capa_box_on">
            <div class="capa_top">
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_01.jpg"></a>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_02.jpg">
                        <div class="tran">
                            <span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家LED 智能台灯</li>
                            <li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">169元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_03.jpg">
                        <div class="tran">
                            <span>现在看起来挺不错的，性价比超高！持续关注呀</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">九号平衡车 Plus</li>
                            <li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">3499元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_04.jpg">
                        <div class="tran">
                            <span>米兔智能故事机.</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米兔智能故事机</li>
                            <li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow capa_unright">
                    <a href=""><img src="/img/capa_05.jpg" alt="">
                        <div class="tran">
                            <span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家恒温电水壶</li>
                            <li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="capa_bottom">
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_06.jpg"></a>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_07.jpg">
                        <div class="tran">
                            <span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">iHealth体温计</li>
                            <li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_08.jpg">
                        <div class="tran">
                            <span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家行车记录仪</li>
                            <li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_09.jpg">
                        <div class="tran">
                            <span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
                        </div>
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家iHealth血压计</li>
                            <li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_unright">
                    <div class="capa_min ">
                        <img class="capa_shadow" src="/img/capa_10.jpg">
                    </div>
                    <div class="capa_min bottom capa_shadow">
                        <a href="">
                        <div class="figure_a">
                            <h3>浏览更多</h3>
                            <li style="color:#757575; ">电影影视</li>
                        </div>
                        <div class="figure_b">
                            <div class="figure_b_yuan">
                                <li>→</li>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 为你推荐 -->
<div class="recommend">
    <div class="capacity">
        <div class="capa_box_top">
            <div class="capa_box_top_al">为你推荐</div>
            <div class="capa_box_top_ar">
<!--                <div class="capa_box_top_ar_min orangeGL"><a href="">路由器</a></div>-->
<!--                <div class="capa_box_top_ar_min orangeGL"><a href="">酷玩</a></div>-->
<!--                <div class="capa_box_top_ar_min orangeGL"><a href="">健康</a></div>-->
<!--                <div class="capa_box_top_ar_min orangeGL"><a href="">出行</a></div>-->
<!--                <div class="capa_box_top_ar_min orangeGL"><a href="">热门</a></div>-->
            </div>
        </div>
        <div class="capa_box">
            <div class="capa_top">
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_01.jpg"></a>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_02.jpg">
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家LED 智能台灯</li>
                            <li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">169元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_03.jpg">
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">九号平衡车 Plus</li>
                            <li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">3499元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow">
                    <a href=""><img src="/img/capa_04.jpg">
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米兔智能故事机</li>
                            <li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
                        </ul>
                    </div>
                </div>
                <div class="capa capa_shadow capa_unright">
                    <a href=""><img src="/img/capa_05.jpg" alt="">
                    </a>
                    <div class="capa_a">
                        <ul>
                            <li style="color: #333333">米家恒温电水壶</li>
                            <li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
                            <li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 热门产品 -->
<div class="popular">
    <div class="popular_background">
        <div class="popular_box_top">
            <div class="popular_box_top_al">热门产品</div>
        </div>
        <div class="popu_box">

            <div class="popu popu_unleft popu_shadow">
                <a href=""><img src="/img/popu_01.jpg"></a>
                <div class="popu_bottom">
                    <p class="review">
                        外形简洁大方，大爱小米！全家人都在用小米的产品，真心不错，最主要的是性价比高。附图，给客服妹子一个大...
                    </p>
                    <p class="author"> 来自于 秘密 的评价 </p>
                    <div class="info">
                        <h3 class="title">小米随身蓝牙音箱</h3>
                        <span class="sep">|</span>
                        <p class="price"><span>69</span>元</p>
                    </div>
                </div>
            </div>

            <div class="popu popu_shadow">
                <a href=""><img src="/img/popu_02.jpg"></a>
                <div class="popu_bottom">
                    <p class="review">
                        这箱子很好，外观漂亮，实用性强。很轻，有点软但不影响它的坚固。
                    </p>
                    <p class="author"> 来自于 秘密 的评价 </p>
                    <div class="info">
                        <h3 class="title">90分旅行箱 20寸</h3>
                        <span class="sep">|</span>
                        <p class="price"><span>229</span>元</p>
                    </div>
                </div>
            </div>

            <div class="popu popu_shadow">
                <a href=""><img src="/img/popu_03.jpg"></a>
                <div class="popu_bottom">
                    <p class="review">
                        安装简洁方便，信号不错！！！！！
                    </p>
                    <p class="author"> 来自于 秘密 的评价 </p>
                    <div class="info">
                        <h3 class="title">小米路由器3</h3>
                        <span class="sep">|</span>
                        <p class="price"><span>149</span>元</p>
                    </div>
                </div>
            </div>

            <div class="popu popu_shadow">
                <a href=""><img src="/img/popu_04.jpg"></a>
                <div class="popu_bottom">
                    <p class="review">
                        包装很让人感动，式样也很可爱，做出的饭全家人都爱吃，超爱五星！手机控制还是不太熟练，最主要是没有连接...
                    </p>
                    <p class="author"> 来自于 秘密 的评价 </p>
                    <div class="info">
                        <h3 class="title">米家压力IH电饭煲</h3>
                        <span class="sep">|</span>
                        <p class="price"><span>999</span>元</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 内容 -->
<div class="content">
    <div class="popular_background">
        <div class="popular_box_top">
            <div class="popular_box_top_al">内容</div>
        </div>
        <div class="popu_box">

            <div class="popu cont_border_top1 popu_unleft popu_shadow">
                <div class="popu_bottom">
                    <h2 class="con_title">图书</h2>
                    <h4 class="popu_name">哈利·波特与被诅咒的孩子</h4>
                    <p class="popu_desc"><a href="">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </a></p>
                    <p class="popu_price"><a href="">29.37元</a></p>
                </div>
                <a href=""><img src="/img/cont_01.jpg"></a>
            </div>

            <div class="popu cont_border_top2 popu_shadow ">
                <div class="popu_bottom">
                    <h2 class="con_title">MIUI 主题</h2>
                    <h4 class="popu_name">包宝宝养成记</h4>
                    <p class="popu_desc"><a href="">包宝宝定制主题Q萌上线！快来领取萌萌包宝宝吧！</a></p>
                    <p class="popu_price"><a href="">4.2米币</a></p>
                </div>
                <a href=""><img src="/img/cont_02.jpg"></a>
            </div>

            <div class="popu cont_border_top3 popu_shadow ">
                <div class="popu_bottom">
                    <h2 class="con_title">游戏</h2>
                    <h4 class="popu_name">小米超神</h4>
                    <p class="popu_desc"><a href="">实力派！一起团！</a></p>
                    <p class="popu_price"><a href=""></a></p>
                </div>
                <a href=""><img src="/img/cont_03.jpg"></a>
            </div>

            <div class="popu popu_border_top4 popu_shadow ">
                <div class="popu_bottom">
                    <h2 class="con_title">应用</h2>
                    <h4 class="popu_name">2017金米奖</h4>
                    <p class="popu_desc"><a href="">最优秀的应用和游戏</a></p>
                    <p class="popu_price"><a href=""></a></p>
                </div>
                <a href=""><img src="/img/cont_04.jpg"></a>
            </div>

        </div>
    </div>
</div>

<!-- 视频 -->
<div class="video">
    <div class="popular_background">
        <div class="popular_box_top">
            <div class="popular_box_top_al">视频</div>
        </div>
        <div class="popu_box">

            <div class="vid popu_unleft popu_shadow">
                <div class="video_top">
                    <a href="">
                        <video class="this_vid" src="/img/snowPerson.mp4" controls loop
                               poster="/img/video_01.jpg"></video>
                    </a>
                </div>
                <div class="video_bottom">
                    <h3 class="vid_title"><a href="">小米8，一部与众不同的手机</a></h3>
                    <p class="vid_desc">透明探索版，将科技与美学完美结合</p>
                </div>
            </div>

            <div class="vid  popu_shadow">
                <div class="video_top">
                    <a href="">
                        <video class="this_vid" src="/img/snowPerson.mp4" controls loop
                               poster="/img/video_02.jpg"></video>
                    </a>
                </div>
                <div class="video_bottom">
                    <h3 class="vid_title"><a href="">小米MIX 2S，一面科技 一面艺术</a></h3>
                    <p class="vid_desc">艺术品般陶瓷机身，惊艳、璀璨</p>
                </div>
            </div>

            <div class="vid  popu_shadow">
                <div class="video_top">
                    <a href="">
                        <video class="this_vid" src="/img/snowPerson.mp4" controls loop
                               poster="/img/video_03.jpg"></video>
                    </a>
                </div>
                <div class="video_bottom">
                    <h3 class="vid_title"><a href="">天生丽质的小米6X</a></h3>
                    <p class="vid_desc">让你一见倾心</p>
                </div>
            </div>

            <div class="vid  popu_shadow">
                <div class="video_top">
                    <a href="">
                        <video class="this_vid" src="/img/snowPerson.mp4" controls loop
                               poster="/img/video_01.jpg"></video>
                    </a>
                </div>
                <div class="video_bottom">
                    <h3 class="vid_title"><a href="">生活中无所不在的小爱同学</a></h3>
                    <p class="vid_desc">透明探索版，将科技与美学完美结合</p>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 底部菜单模块-->
<th:block th:include="foot"/>


<!-- 引入js模板 -->
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>

<!-- 首页商品分类模板 -->
<script type="text/html" id="categoryTemplate">
    {{#      layui.each(d,function(index,item){      }}
    <li class="scr_li">
        <a href="">{{=item.name}}</a>
        <div class="item-list">
            <ul>
<!--                {{#   layui.each(item.children,function(i,v){   }}-->
<!--                <li class="scr_li">-->
<!--                    <img src="{{v.icon}}" alt=""/>-->
<!--                    <span>{{=v.name}}</span>-->
<!--                </li>-->
<!--                {{#   })  }}-->
            </ul>
        </div>
    </li>
    {{#      })      }}
</script>

<script>
    layui.use(["layer", "laytpl"], function () {
        var layer = layui.layer;//弹窗
        var laytpl = layui.laytpl;//layui模板引擎
        var $ = layui.jquery;

        //页面加载一完成,就发请求获取所有的分类数据
        $.get("/category/list", function (categories) {
            console.log(categories)
            //把categories数据转化成html，再插入到UL1里
            laytpl($("#categoryTemplate").html()).render(categories, function (a) {
                $("#UL1").html(a);
            });
            //渲染二级分类
            $(".l-list").children("li").hover(function () {
                $(this).css({backgroundColor: "#ff6700"}).siblings().css({backgroundColor: "transparent"});
                $(this).children(".child-list").css({display: "block"}).parent().siblings().children(".child-list").css({display: "none"});
                $(this).find("li").hover(function () {
                    $(this).css({color: "#ff6700"})
                }, function () {
                    $(this).css({color: "#333"})
                })
            }, function () {
                $(this).css({backgroundColor: "transparent"}).children(".child-list").css({display: "none"})
            })
        });

    });


    // var abc = document.getElementsByClassName("script_capa_box_top_ar");
    // console.log("abc:" + abc);
    // console.log("abc[0]" + abc[0]);
    // var box = document.getElementsByClassName("scrip_capa_box");
    // console.log("box:" + box);
    // console.log("box[0]:" + box[0]);
    // for (var i = 0; i < abc.length; i++) {
    //     abc[i].index = i;
    //     abc[i].onmouseover = function () {
    //         for (var j = 0; j < abc.length; j++) {
    //             box[j].className = "capa_box scrip_capa_box";
    //         }
    //         box[this.index].className = "capa_box scrip_capa_box scrip_capa_box_on"
    //         console.log("this.index:" + this.index);
    //     }
    // }
    // var n = 0;
    //
    // /*setInterval(function () {
    //     n++;
    //      if(n > $(".scroll ul li").length){
    //      n=0;
    //      }
    //     $(".scroll ul li").css("opacity","0").eq(n).css("opacity","1")
    // },100)*/
    // var t = setInterval(fun, 1000);
    //
    // function fun() {
    //     n++;
    //     if (n > $(".scroll>ul>li").length - 1) {
    //         n = 0;
    //     }
    //     $(".scroll>ul>li").css("opacity", "0").eq(n).css("opacity", "1")
    //     $(".scroll_dot span").eq(n).addClass("scroll_dot_span").siblings().removeClass("scroll_dot_span");
    // }
    //
    // $(".scroll_arrows .left").click(function () {
    //     n -= 2;
    //     if (n < -1) {
    //         n = 4;
    //     }
    //     fun()
    //
    // });
    // $(".scroll_arrows .right").click(function () {
    //     fun()
    // });
    // $(".scroll_dot span").click(function () {
    //     console.log($(this).index());
    //     n = $(this).index() - 1;
    //     $(this).siblings().removeClass("scroll_dot_span").end().addClass("scroll_dot_span");
    //     fun()
    // });
    // $(".scroll").hover(function () {
    //         clearInterval(t);
    //     },
    //     function () {
    //         t = setInterval(fun, 1000);
    //     });

</script>
</body>
</html>